<template>
	<view>
		<!-- 背景图 + 用户基本信息 -->
		<user-space-head :userinfo="userinfo"></user-space-head>
		<!-- 统计 -->
		<view class="user-space-data">
			<home-data :homedata="spacedata"></home-data>
		</view>
		<view style="height: 20upx; background: #F4F4F4;"></view>
		<!-- tab导航 -->
		<swiper-tab-head
		:tabBars="tabBars" 
		:tabIndex="tabIndex"
		@tabtap="tabtap"
		scrollItemStyle="width:33.33%;"
		scrollStyle="border-bottom:0;">
		</swiper-tab-head>
			
		<block v-for="(item,index) in tablist" :key="index">
			<template v-if="tabIndex==0 && index==0">
				<!-- 主页 -->
				<user-space-userinfo :userinfo="userinfo"></user-space-userinfo>
			</template>
			<template v-else-if="tabIndex==index">
				<!-- 列表 -->
				<block v-for="(list,listindex) in item.list" :key="listindex">
					<common-list :item="list" :index="listindex"></common-list>
				</block>
				<!-- 上拉加载 -->
				<load-more :loadtext="item.loadtext"></load-more>
			</template>
		</block>
		
		<!-- 操作菜单 -->
		<user-space-popup :show="show"
		@hide="togleShow"
		@lahei="lahei"
		@beizhu="beizhu"></user-space-popup>
		
	</view>
</template>

<script>
	import userSpaceHead from "../../components/user-space/user-space-head.vue";
	import homeData from "../../components/home/home-data.vue";
	import swiperTabHead from "../../components/index/swiper-tab-head.vue";
	import userSpaceUserinfo from "../../components/user-space/user-space-userinfo.vue";
	import commonList from "../../components/common/common-list.vue";
	import loadMore from "../../components/common/load-more.vue";
	import userSpacePopup from "../../components/user-space/user-space-popup.vue";
	export default {
		components:{
			userSpaceHead,
			homeData,
			swiperTabHead,
			userSpaceUserinfo,
			commonList,
			loadMore,
			userSpacePopup
		},
		data() {
			return {
				show:false,
				userinfo:{
					bgimg:1,
					userpic:"../../static/img/hema.jpg",
					username:"木木的奇奇",
					sex:0,
					age:20,
					isguanzhu:false,
				    regtime:"2020-11-11",
					id:1213,
					birthday:"1997-06-01",
					job:"IT",
					path:"湖北宜昌",
					qg:"未婚"
				},
				spacedata:[
					{name:"获赞",num:"10k"},
					{name:"关注",num:11},
					{name:"粉丝",num:12},
				],
				tabIndex:0,
				tabBars:[
					{name:'主页',id:'zhuye'},
					{name:'逗事',id:'doushi'},
					{name:'动态',id:'dongtai'}
				],
				tablist:[ {},
					{
						loadtext:"上拉加载更多",
						list:[
							//文字
							{
								//文字列表
								userpic:'../../static/img/ez.png',
								username:'伊泽瑞尔',
								sex:0, //0 男 1 女
								age:18,
								isguanzhu:false,
								title:'是时候表演真正的技术了！',
								titlepic:'',
								video:false,
								share:false,
								path:'上海 浦东',
								sharenum:20,
								commentnum:30,
								goodnum:20
							},
							{
								//文字列表
								userpic:'../../static/img/daofeng.jpg',
								username:'刀锋之影',
								sex:0, //0 男 1 女
								age:18,
								isguanzhu:false,
								title:'只有傻瓜,才会为了荣誉而献身。',
								titlepic:'',
								video:false,
								share:false,
								path:'深圳 龙岗',
								sharenum:20,
								commentnum:30,
								goodnum:20
							},
							{
								//文字列表
								userpic:'../../static/img/xiazi.jpg',
								username:'盲僧',
								sex:0, //0 男 1 女
								age:18,
								isguanzhu:false,
								title:'勇往直前,职责所在',
								titlepic:'',
								video:false,
								share:false,
								path:'湖北 宜昌',
								sharenum:20,
								commentnum:30,
								goodnum:20
							},
							{
								//文字列表
								userpic:'../../static/img/yasuo.jpg',
								username:'亚索',
								sex:0, //0 男 1 女
								age:18,
								isguanzhu:false,
								title:'长路漫漫，唯剑作伴！',
								titlepic:'',
								video:false,
								share:false,
								path:'日本 东京',
								sharenum:20,
								commentnum:30,
								goodnum:20
							},
							{
								//文字列表
								userpic:'../../static/img/timo.jpg',
								username:'提莫',
								sex:0, //0 男 1 女
								age:18,
								isguanzhu:false,
								title:'提莫队长正在待命!！',
								titlepic:'',
								video:false,
								share:false,
								path:'云南 昆明',
								sharenum:20,
								commentnum:30,
								goodnum:20
							}
						]
					},
					{
						loadtext:"上拉加载更多",
						list:[
							{
								//图文列表
								userpic:'../../static/img/ruiwen.jpg',
								username:'锐雯',
								sex:1, //0 男 1 女
								age:25,
								isguanzhu:false,
								title:'艾欧尼亚！',
								titlepic:'../../static/img/ruiwen-img.jpg',
								video:false,
								share:false,
								path:'美国 纽约',
								sharenum:20,
								commentnum:30,
								goodnum:20
							},
							{
								//图文列表
								userpic:'../../static/img/daomei-img.jpg',
								username:'艾瑞利亚',
								sex:1, //0 男 1 女
								age:25,
								isguanzhu:false,
								title:'艾欧尼亚！',
								titlepic:'../../static/img/daomei.jpg',
								video:false,
								share:false,
								path:'广东 深圳',
								sharenum:20,
								commentnum:30,
								goodnum:20
							},
							{
								//图文列表
								userpic:'../../static/img/yasuo.jpg',
								username:'亚索',
								sex:0, //0 男 1 女
								age:25,
								isguanzhu:false,
								title:'艾欧尼亚！',
								titlepic:'../../static/img/yasuo-img.jpg',
								video:false,
								share:false,
								path:'日本 东京',
								sharenum:20,
								commentnum:30,
								goodnum:20
							},
							{
								//图文列表
								userpic:'../../static/img/daofeng.jpg',
								username:'刀锋之影',
								sex:1, //0 男 1 女
								age:25,
								isguanzhu:false,
								title:'艾欧尼亚！',
								titlepic:'../../static/img/daofeng-img.jpg',
								video:false,
								share:false,
								path:'深圳 龙岗',
								sharenum:20,
								commentnum:30,
								goodnum:20
							},
						]
					},
				]
			}
		},
		// 上拉触底事件
		onReachBottom(){
			this.loadmore()
		},
		onNavigationBarButtonTap(e) {
			if(e.index==0){ this.togleShow(); }
		},
		methods:{
			// 操作菜单显示隐藏
			togleShow(){
				this.show = !this.show
			},
			lahei(){
				console.log("拉黑")
			    this.togleShow()
			},
			// 备注
			beizhu(){
				console.log("备注")
				this.togleShow()
			},
			// 上拉加载更多
			loadmore(){
				if(this.tablist[this.tabIndex].loadtext!=='上拉加载更多'){return;}
				//修改状态
				this.tablist[this.tabIndex].loadtext="加载中...";
				//获取数据
				setTimeout(()=>{
					//获取完成
					let obj = {
							userpic:"../../static/img/daofeng.jpg",
							username:"木木的奇奇",
							sex:1,
							age:33,
							isguanzhu:false,
							title:"万人敬仰背后的失落感",
							titlepic:"../../static/img/daofeng-img.jpg",
							video:false,
							share:false,
							path:"深圳 龙岗",
							sharenum:20,
							commentnum:30,
							goodnum:20
					};
					this.tablist[this.tabIndex].list.push(obj)
					this.tablist[this.tabIndex].loadtext='上拉加载更多'
				},1000)
			},
			tabtap(index){
				this.tabIndex=index
			},
		}
	}
</script>
<style>
.user-space-margin {
	margin: 15upx;
}
.user-space-data {
	background: #FFFFFF;
	position: relative;
	z-index: 10;
	border-top-left-radius: 20upx;
	border-top-right-radius: 20upx;
	margin-top: -15upx;
}
</style>
